<template>
  <div class="goods-main-detail">
    <scroll class="goods-detail-scroll" ref="scroll">
      <goods-detail-bar class="goods-detail-bar"></goods-detail-bar>
      <swiper v-if="detailBaseDate" :banner="detailBaseDate.banner" bannerHeight="300px"></swiper>
      <goods-base-detail :detailbasedate="detailBaseDate"></goods-base-detail>
      <goods-shop-info :shopdata="shopData"></goods-shop-info>
      <!-- 测试params -->
      <params-info :paramsinfo="paramsInfo"></params-info>
      <goods-info :detailinfo="detailInfo" @imageLoad="imageLoad"></goods-info>
    </scroll>
  </div>
</template>
<script>
import { getGoodsDetail, GoodsDetail, GoodsShop ,GoodsParams } from "network/goodsDetail.js";
import GoodsDetailBar from "./GoodsDetailBar";
import GoodsBaseDetail from "./GoodsBaseDetail";
import GoodsShopInfo from "./GoodsShopInfo";
import GoodsInfo  from './GoodsInfo'
import ParamsInfo from './ParamsInfo'
import Swiper from "components/common/swiper/Swiper.vue";
import Scroll from "components/common/scroll/Scroll";
console.log(GoodsBaseDetail,'GoodsBaseDetail')
export default {
  name: "GoodsDetail", //使用keepalive include/exclude属性需要给vue组件起个name属性值
  data() {
    return {
      id: null,
      // 轮播图附近数据 注意：这边detailBaseDate初始值是null 还要通过props传子组件。子组件detailBaseDate type是object就会报错
      detailBaseDate: {},
      // 商店信息
      shopData: {},
      // 很多图片展示
      detailInfo:{},
      // 商品参数
      paramsInfo:{}
    };
  },
  methods: {
    // 获取goods详情页数据
    async fetchGoodsDetail(id) {
      // let res = await getGoodsDetail(id);
      let data = await getGoodsDetail(id);
      this. detailBaseDate= new GoodsDetail(data.itemInfo, data.columns, data.shopInfo.services);
      this.shopData=new GoodsShop(data.shopInfo)
      this.detailInfo=data.detailInfo

      // this.paramsInfo=new GoodsParams(data.itemParams.info,data,itemParams.rule)
      this.paramsInfo=new GoodsParams(data.itemParams.info,data.itemParams.rule)
   
 
    },
    imageLoad(){
      // console.log('ddd')
      this.$refs.scroll.refresh()
    }
   
  },
  components: {
    "goods-detail-bar": GoodsDetailBar,
    "goods-base-detail": GoodsBaseDetail,
    "goods-shop-info": GoodsShopInfo,
    ParamsInfo,
    GoodsInfo,
    Swiper,
    Scroll
  },
  computed: {},
  watch: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.id = this.$route.params.id;
    this.fetchGoodsDetail(this.id)
  
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  updated() {}, //生命周期 - 更新之后
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.goods-main-detail {
  position: relative;
  z-index: 2; //为了盖住下面的导航
  background: #fff; //用背景颜色去盖住
  height: 100vh;
}
.goods-detail-scroll{
  height: calc(100% - 44px);
}
.goods-detail-bar{
  position: relative;
  z-index: 2;

}
</style>